Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change floating label placeholder's color #39494

Merged
merged 3 commits into from
Mar 19, 2024

Conversation

TommasoAllegretti
Copy link
Contributor

@TommasoAllegretti TommasoAllegretti commented Dec 12, 2023

Description

Changed the floating labels placeholder's text color from black to light gray (opacity: 0.65).
I removed the styling from the other label tags under .form-select and .form-control:-webkit-autofill parents as every label should now have the same behavior.

Motivation & Context

As requested in issue #39420

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

https://deploy-preview-39494--twbs-bootstrap.netlify.app/docs/5.3/forms/floating-labels/#example/

Related issues

#39420

@TommasoAllegretti TommasoAllegretti requested a review from a team as a code owner December 12, 2023 19:26
@julien-deramond julien-deramond linked an issue Dec 12, 2023 that may be closed by this pull request
@theodorejb
Copy link

👍 Yes! I've often been confused by the current text color since it looks like a value rather than a placeholder.

Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The solution looks fine from a CSS point of view. Any thoughts @mdo ?

Copy link
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to modify the $form-floating-transition value as well?

@louismaximepiton
Copy link
Member

I think it's fine as-is.

@theodorejb
Copy link

Is there anything preventing this from being merged?

@julien-deramond
Copy link
Member

Is there anything preventing this from being merged?

For the moment, the target of this one is v5.4.0. The next version will probably be a v5.3.x. We'll evaluate when to merge it at the appropriate time.

Copy link
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can add this in v5.3.4.

@julien-deramond julien-deramond self-requested a review March 19, 2024 05:46
@julien-deramond julien-deramond merged commit e340674 into twbs:main Mar 19, 2024
14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Placeholder colour for floating labels
5 participants